<template>
  <div>
    <div class="mine-panel">
      <router-link to="/info" class="meida relative clearfix">
        <div class="media-object pull-left"><img :src="userinfo.avatar" alt="" class="img-avtar"></div>
        <div class="media-body over-hidden">
          <div>
            <h3 class="media-heading">{{userinfo.nickname}}</h3>
            <p class="media-desc">UID:{{userinfo.unionid}}</p>
          </div>
        </div>
        <i class="icon van-icon van-icon-arrow"></i>
      </router-link>
      <ul class="counts-list text-center">
        <router-link to="/income" tag="li">
          <p>538</p>
          <p>总收益(元)</p>
        </router-link>
        <li>
          <p>5</p>
          <p>消息</p>
        </li>
        <li>
          <p>27</p>
          <p>关注</p>
        </li>
      </ul>
    </div>

    <div class="subnav-panel">
      <div class="button-group text-center"><button type="button">一键开通直播间</button></div>
      <div class="subnav-list">
        <a class="cell-item-arrow">
          <div>购买记录</div>
          <i class="icon van-icon van-icon-arrow"></i>
        </a>
        <router-link to="/goodorder" class="cell-item-arrow">
          <div>商品订单</div>
          <i class="icon van-icon van-icon-arrow"></i>
        </router-link>
        <a class="cell-item-arrow">
          <div>我的拼团</div>
          <i class="icon van-icon van-icon-arrow"></i>
        </a>
        <a class="cell-item-arrow">
          <div>我的投票</div>
          <i class="icon van-icon van-icon-arrow"></i>
        </a>
        <router-link to="/mine/browsed" class="cell-item-arrow">
          <div>历史浏览</div>
          <i class="icon van-icon van-icon-arrow"></i>
        </router-link>

      </div>

      <div class="subnav-list">
        <a class="cell-item-arrow">
          <div>优惠券</div>
          <i class="icon van-icon van-icon-arrow"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      userinfo: state => state.userinfo
    })
  },
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
  .icon {
    font-size: 32px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
.mine-panel {
  padding: 60px 32px 40px 56px;
  margin-bottom: 12px;
  background: #fff;
  .meida {
    display: flex;
    margin-bottom: 45px;
    position: relative;
  }

  .media-object{
    width: 110px;
    height: 110px;
    border: 1px solid #d0d0d0;
    margin-right: 18px;
    border-radius: 100%;
    overflow: hidden;
  }

  .media-heading {
    font-size: 30px;
  }

  .media-desc {
    font-size: 24px;
  }

  .media-body {
    display: flex;
    align-items: center;
    line-height: 1.5;
    color: #666;
  }

  .counts-list {
    display: flex;
    li {
      flex: 1;
    }
    p:nth-of-type(1){
      font-size: 48px;
      color: #000;
    }

    p:nth-of-type(2){
      font-size: 24px;
      color: #666;
    }
  }
}

.button-group {
  padding: 30px 0 10px;
  background-color: #fff;
  font-size: 0;
  button {
    width: 77%;
    height: 78px;
    font-size: 28px;
    line-height: 78px;
    border-radius: 39px;
    color: #fff;
    background: #1549eb;
  }
}
.subnav-list {
  padding: 0 35px;
  background-color: #fff;
}
.cell-item-arrow {
  display: block;
  height: 100px;
  border-bottom: 2px solid #f3f3f3;
  font-size: 30px;
  color: #333;
  line-height: 100px;
  position: relative;

  div { flex: 1; }
  .icon {
    font-size: 32px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>